@charset "UTF-8";
// https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
// https://zhuanlan.zhihu.com/p/68646055
// create an entire color palette magicly by inputing just a single primary color.

@import './tinycolor-vue3';

$hueStep: 2;
$saturationStep: 16; // 饱和度阶梯，浅色部分
$saturationStep2: 5; // 饱和度阶梯，深色部分
$brightnessStep1: 5; // 亮度阶梯，浅色部分
$brightnessStep2: 15; // 亮度阶梯，深色部分
$lightColorCount: 5; // 浅色数量，主色上
$darkColorCount: 4; // 深色数量，主色下

@function getHue($h, $s, $v, $i, $light) {
  $hue: null;
  @if ($h >= 60 and $h <= 240) {
    // 冷色调
    // 减淡变亮 色相顺时针旋转 更暖
    // 加深变暗 色相逆时针旋转 更冷
    @if ($light == true) {
      $hue: $h - $hueStep * $i;
    } @else {
      $hue: $h + $hueStep * $i;
    }
  } @else {
    // 暖色调
    // 减淡变亮 色相逆时针旋转 更暖
    // 加深变暗 色相顺时针旋转 更冷
    @if ($light == true) {
      $hue: $h + $hueStep * $i;
    } @else {
      $hue: $h - $hueStep * $i;
    }
  }
  @if ($hue < 0) {
    $hue: $hue + 360;
  } @else if ($hue >= 360) {
    $hue: $hue - 360;
  }

  @return $hue;
}

@function getSaturation($h, $s, $v, $i, $light) {
  $saturation: 0;
  // grey color don't change saturation
  //@debug $h;
  //@debug $s;
  // 原来这里是没有单位的比较
  // @if ($h == 0 and $s == 0) {
  @if ($h == 0deg and $s == 0) {
    @return $s;
  }
  @if ($light == true) {
    // 减淡变亮 饱和度迅速降低
    $saturation: $s - $saturationStep * $i;
  } @else if ($i == $darkColorCount) {
    // 加深变暗-最暗 饱和度提高
    $saturation: $s + $saturationStep;
  } @else {
    // 加深变暗 饱和度缓慢提高
    $saturation: $s + $saturationStep2 * $i;
  }

  // 边界值修正
  @if ($saturation > 100) {
    $saturation: 100;
  }
  // 第一格的 s 限制在 6-10 之间
  @if ($light == true and $i == $lightColorCount and $saturation > 10) {
    $saturation: 10;
  }
  @if ($saturation < 6) {
    $saturation: 6;
  }
  @return round($saturation);
}

@function getValue($h, $s, $v, $i, $light) {
  @if ($light == true) {
    // 减淡变亮
    @return ($v + $brightnessStep1 * $i);
  }
  // 加深变暗幅度更大
  @return ($v - $brightnessStep2 * $i);
}

// 使用例子
// $primary-1: generateColor($brand-color1, 1);
// $primary-2: generateColor($brand-color1, 2);
// $primary-3: generateColor($brand-color1, 3);
// $primary-4: generateColor($brand-color1, 4);
// $primary-5: generateColor($brand-color1, 5);
// $primary-6: $brand-color1;
// $primary-7: generateColor($brand-color1, 7);
// $primary-8: generateColor($brand-color1, 8);
// $primary-9: generateColor($brand-color1, 9);
// $primary-10: generateColor($brand-color1, 10);

// 注意~~~~注意~~~~注意~~~~
// 有一些颜色根AntDesign 官方生成的不一样 但是官方定义的颜色是对的
// 因为数学公式 round 之类的精度问题，导致微妙的不一致
// index 大于等于6 就是变亮
@function generateColor($color, $index) {
  $isLight: $index <= 6;
  // $step 为index与6的相对距离
  $step: 0;
  @if $isLight {
    $step: $lightColorCount + 1 - $index;
  } @else {
    $step: $index - $lightColorCount - 1;
  }
  $hsv: ch-color-to-hsv($color);

  $v: nth($hsv, 3);
  $s: nth($hsv, 2);
  $h: nth($hsv, 1);

  //@debug $h, $s, $v ;
  //@debug $step;
  $adjustHue: getHue($h, $s, $v, $step, $isLight); // round(getHue($h, $s, $v, $level, $light));
  $adjustSaturation: getSaturation($h, $s, $v, $step, $isLight);
  $adjustLight: getValue($h, $s, $v, $step, $isLight);
  //@debug $adjustHue, $adjustSaturation, $adjustLight;
  @return ch-hsv-to-color($adjustHue, $adjustSaturation, $adjustLight);
}

// 使用例子
// $primary-100: generateColorWithLight($brand-color, 5, true);
// $primary-200: generateColorWithLight($brand-color, 4, true);
// $primary-300: generateColorWithLight($brand-color, 3, true);
// $primary-400: generateColorWithLight($brand-color, 2, true);
// $primary-500: generateColorWithLight($brand-color, 1, true);
// $primary-600: $brand-color;
// $primary-700: generateColorWithLight($brand-color, 1, false);
// $primary-800: generateColorWithLight($brand-color, 2, false);
// $primary-900: generateColorWithLight($brand-color, 3, false);
// $primary-1000: generateColorWithLight($brand-color, 4, false);

@function generateColorWithLight($color, $level, $light) {
  $hsv: ch-color-to-hsv($color);

  $v: nth($hsv, 3);
  $s: nth($hsv, 2);
  $h: nth($hsv, 1);

  //@debug $h, $s, $v ;
  $adjustHue: round(getHue($h, $s, $v, $level, $light));
  $adjustSaturation: getSaturation($h, $s, $v, $level, $light);
  $adjustLight: getValue($h, $s, $v, $level, $light);
  //@debug $adjustHue, $adjustSaturation, $adjustLight;
  @return ch-hsv-to-color($adjustHue, $adjustSaturation, $adjustLight);
}
